<template>
  <div class="sun">
    <h2>孙子组件</h2>
    <div>普通注入：{{ someMsg }} <span>注：provide传递的若是普通类型，则值不是响应式的，需要进行处理才能成为响应式</span>
    </div>
    <div>响应式注入：{{ asyncMsg() }} <span>注：provide传递一个回调函数可实现数据响应式：‘asyncMsg: (...args) => args.length ? this.msg = args[0] : this.msg,’。调用asyncMsg方法展示数据：asyncMsg()；传递参数同步修改数据：asyncMsg(xxxx)</span>
    </div>
    <el-input v-model="newMsg"></el-input>
    <el-button @click="asyncMsg(newMsg)">修改祖父组件的内容</el-button>
    <br/>
    <br/>
    <div>{{ asyncObj }} <span>注：provide传递的若是对象类型，则值是响应式的</span></div>
    <el-button @click="handleChangeAge">年龄＋1</el-button>
    <br/>
    <br/>
    <div>{{ asyncArr }} <span>注：provide传递的若是数组类型，则值是响应式的</span></div>
    <el-button @click="handleChangeArr">追加数据</el-button>
  </div>
</template>

<script>
export default {
  name: "sun",
  inject: ['someMsg', 'asyncMsg', 'asyncObj', 'asyncArr'],
  data() {
    return {
      newMsg: '',
    }
  },
  methods: {
    handleChangeAge() {
      // const newObj = this.asyncObj()
      // newObj.age += 1
      this.asyncObj.age += 1
    },
    handleChangeArr() {
      this.asyncArr.push(this.asyncArr.at(-1) + 1)
    }
  }
}
</script>

<style scoped>
.sun {
  background: #f1f1f1;
  margin: 10px;
  padding: 10px;
}

span {
  color: orangered;
}
</style>
